<template>
	<view class="wrap">
		<view class="formWrap">
			<uni-forms :modelValue="form" label-width="150rpx">
				<uni-forms-item label="站点名称:" class="aaa">
					<view class="item row a-center">南工大科技产业园J5栋</view>
				</uni-forms-item>
				<uni-forms-item label="故障时间:">
					<view class="item row a-center">2023-06-19 15:28:32</view>
				</uni-forms-item>
				<uni-forms-item label="故障等级:">
					<uni-data-select v-model="form.breakdown_level" :localdata="level_options"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="故障照片:">
					<uni-file-picker limit="1" v-model="image" mode="grid" :auto-upload="false" @select="imageChange" />
				</uni-forms-item>
				<uni-forms-item label="故障描述:">
					<uni-easyinput type="textarea" v-model="form.desc" placeholder="请输入故障描述" />
				</uni-forms-item>
				<uni-forms-item label="处理状态:">
					<uni-data-select v-model="form.status" :localdata="status_options"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="处理描述:" v-if="form.status === '1'">
					<uni-easyinput type="textarea" v-model="form.handle_desc" placeholder="请输入处理描述" />
				</uni-forms-item>
				<uni-forms-item label="处理方案:" v-if="form.status === '1'">
					<uni-easyinput type="textarea" v-model="form.treatment_scheme" placeholder="请输入处理方案" />
				</uni-forms-item>
				<uni-forms-item label="处理照片:" v-if="form.status === '1'">
					<uni-file-picker v-model="handle_image" limit="1" mode="grid" :auto-upload="false"
						@select="handleImageChange" />
				</uni-forms-item>
				<view class="baocun row j-center a-center" @click="preserve">
					保存
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { request, url } from '@/utils'
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useStore } from '@/stores/user';
	const form = ref({
		desc: '',
		handle_desc: '',
		breakdown_level: '',
		treatment_scheme: '',
		image: '',
		handle_image: '',
		status: '',
		id: ''
	})
	const image = ref([
		{
			"name": "",
			"extname": "",
			"url": ""
		}
	])
	const handle_image = ref([
		{
			"name": "",
			"extname": "",
			"url": ""
		}
	])
	onLoad((options) => {
		const detail = JSON.parse(decodeURIComponent(options.detail))
		form.value.id = detail.id
		form.value.breakdown_level = detail.breakdown_level === '严重' ? '2' : '1'
		form.value.desc = detail.desc
		form.value.handle_desc = detail.handle_desc
		form.value.treatment_scheme = detail.treatment_scheme
		form.value.status = detail.status === '未处理' ? '0' : '1'
		form.value.image = detail.image
		form.value.handle_image = detail.handle_image

		handle_image.value[0].name = 'aa'
		handle_image.value[0].extname = 'aa'
		handle_image.value[0].url = `${detail.handle_image}?${new Date().getTime()}`

		image.value[0].name = 'bb'
		image.value[0].extname = 'bb'
		image.value[0].url = `${detail.image}?${new Date().getTime()}`
	})
	const level_options = ref([
		{ value: '4', text: "重大" },
		{ value: '3', text: "严重" },
		{ value: '2', text: "一般" },
		{ value: '1', text: "轻微" },
	])
	const status_options = ref([
		{
			value: '1',
			text: '已处理',
		},
		{
			value: '0',
			text: '未处理',
		},
	])
	const imageChange = (e : any) => {
		const tempFilePaths = e.tempFilePaths;
		//获取图片临时路径
		const imgUrl = tempFilePaths[0]
		uni.uploadFile({
			url: `${url}/api/v1/uploadBreakDownImage`,
			header: { 'api-token': useStore().token },
			filePath: imgUrl,
			formData: {
				'permission': 'uploadFaultImage',
				'id': form.value.id
			},
			name: 'breakdown',
			success: (uploadFileRes) => {
				const resUrl = JSON.parse(uploadFileRes.data).data
				// form.value.image = `${url}/${resUrl}`
				form.value.image = `http://zhxfcp.nz-cloud.com/${resUrl}`
			},
			fail(err) {
				console.log(err);
			}
		})
	}
	const handleImageChange = (e : any) => {
		const tempFilePaths = e.tempFilePaths;
		//获取图片临时路径
		const imgUrl = tempFilePaths[0]
		uni.uploadFile({
			url: `${url}/api/v1/uploadBreakDownImage`,
			header: {
				'api-token': useStore().token,
				'Content-Type': 'multipart/form-data',
			},
			filePath: imgUrl,
			formData: {
				'permission': 'uploadFaultImage',
				'handle': 'handle',
				'id': form.value.id
			},
			name: 'breakdown',
			success: (uploadFileRes) => {
				const resUrl = JSON.parse(uploadFileRes.data).data
				// form.value.handle_image = `${url}/${resUrl}`
				form.value.handle_image = `http://zhxfcp.nz-cloud.com/${resUrl}`
			},
			fail(err) {
				console.log(err);
			}
		})
	}
	const preserve = async () => {
		const res : any = await request('/api/v1/editBreakDown?permission=editFault', form.value, 'POST')
		if (res.code !== 1000) {
			uni.showToast({
				title: res.message,
				icon: 'error'
			})
		}
		else {
			uni.showToast({
				title: '保存成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-forms-item__label {
		font-size: 24rpx;
		color: #151516;
		font-weight: bold;
	}

	.wrap {
		// height: 1000rpx;
		background-color: #F6F6F6;
		padding: 24rpx;

		.formWrap {
			background-color: #fff;
			padding: 44rpx;
			border-radius: 16rpx;
			box-shadow: 0px 3px 6px rgba(191, 191, 191, 0.16);

			.item {
				height: 100%;
				font-size: 24rpx;
				color: #151516;
			}

			.baocun {
				height: 88rpx;
				background-color: #3665FF;
				border-radius: 200rpx;
				color: #fff;
				font-size: 34rpx;
				margin-top: 50rpx;
			}
		}
	}
</style>